<!--
 * @Author: your name
 * @Date: 2021-12-21 17:06:27
 * @LastEditTime: 2024-01-16 14:46:20
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/picker/demo.vue
-->
<script setup>
import {ref} from 'vue'
import {Picker} from '../../../packages/lib/index'
const columns_1 = ['重庆', '四川', '贵州', '湖北', '湖南', '上海', '北京', '广东', '福建', '山东', '吉林']
const columns_0 = [
    {
        "name": "就是要违背",
        "value": {
            "chineseDesc": "就是要违背",
            "corpId": 68037,
            "reasonCategory": "1",
            "reasonCode": "qqqq",
            "saveReasonId": 68670,
            "saveReasonType": "1"
        }
    },
    {
        "name": "其他",
        "value": "其他"
    }
]

const columns_2 = [{values: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}, {values: ['上午', '中午', '下午', '晚上']},{values: ['上午', '中午', '下午', '晚上']}]

const columns_3 = [
  {
      name: '四川省',
      children: [
        {name: '成都市'},
        {name: '绵阳市'},
        {name: '雅安市'}
      ]
    },
    {
      name: '重庆',
      children: [
        {name: '渝北区'},
        {name: '沙坪坝'},
        {name: '渝中区'},
        {name: '北碚区'}
      ]
    }
  ]
const columns_4 = [
    {
      name: '四川省',
      children: [
        {
          name: '成都市',
          children: [
            {name: '双流区'},
            {name: '郫县区'},
            {name: '都江堰'},
            {name: '金牛区'},
          ]
        },
        {
          name: '绵阳市',
          children: [
            {name: '罗江区'},
            {name: '中江县'},
            {name: '绵竹市'},
            {name: '青川县'},
          ]
        },
        {
          name: '雅安市',
          children: [
            {name: '甘孜'},
            {name: '阿坝'},
            {name: '凉山'},
            {name: '东麓'},
          ]
        }
      ]
    },
    {
      name: '重庆',
      children: [
        {
          name: '渝北区',
          children: [
            {name: '照母山'},
            {name: '人和'},
            {name: '大竹林'},
            {name: '鸳鸯'},
            {name: '礼嘉'},
          ]
        },
        {
          name: '渝中区',
          children: [
            {name: '观音桥'},
            {name: '红旗河沟'},
            {name: '解放碑'},
            {name: '鹅岭'}
          ]
        },
        {
          name: '沙坪坝区',
          children: [
            {name: '磁器口'},
            {name: '大学城'},
            {name: '西永'},
            {name: '土主'},
            {name: '沙坪坝'},
          ]
        }
      ]
    }
  ]
const columns = ref([])

const pickerRef_0 = ref()
const pickerRef_1 = ref()
const pickerRef_2 = ref()
const pickerRef_3 = ref()
const pickerRef_4 = ref()
const open_0 = (data) => {
  columns_0.value = data
  pickerRef_0.value.show()
}

const selectedIndex = ref([3])
const open_1 = (data) => {
  columns_1.value = data
  selectedIndex.value = [0]
  pickerRef_1.value.show()
}
const open_2 = (data) => {
  columns_1.value = data
  selectedIndex.value = [1]
  pickerRef_1.value.show()
}
const open_3 = (data) => {
  columns_3.value = data
  pickerRef_3.value.show()
}
const open_4 = (data) => {
  columns_4.value = data
  pickerRef_4.value.show()
}

const confirm = (value, index) => {
  console.log(value, index)
}
</script>

<template>
  <div>
    <button @click="open_0(columns_0)">基础用法</button>
    <button @click="open_1(columns_1)">基础用法</button>
    <button @click="open_2(columns_2)">多列显示</button>
    <button @click="open_3(columns_3)">级联选择</button>
    <button @click="open_4(columns_4)">三级联选择</button>
    <Picker ref="pickerRef_0" :columns="columns_0" title="城市选择" @confirm="confirm" />
    <Picker ref="pickerRef_1" :columns="columns_1" :selectedIndex="selectedIndex" title="城市选择" @confirm="confirm" />
    <Picker ref="pickerRef_2" :columns="columns_1" :selectedIndex="selectedIndex" title="城市选择" @confirm="confirm" />
    <Picker ref="pickerRef_3" :columns="columns_3" title="城市选择" @confirm="confirm" />
    <Picker ref="pickerRef_4" :columns="columns_4" title="城市选择" @confirm="confirm" />
  </div>
</template>

<style>
</style>
